@import './common.styl'
rightSide = 187px
rightMargin = rightSide + 18


boxShadow = 0px 0px 5px 5px #ecf1fa

borderRadius = 5px

.underline
    border-bottom: 1px solid #dadee8

.try-charts
    float: right

.free-course-btns
    float: right

.buy-now a,.goin a
    display: block
    width: 120px
    height: 35px
    background: #1966ff
    text-align: center
    line-height: 35px
    color: #fff
    border-radius: 20px
    font-size: 16px

.onpay-order-btn
    display: block
    width: 100%
    height: 30px
    text-align: center
    line-height: 30px
    margin: 0 auto
    float: left
    border: 1px solid #1966ff
    color: #1966ff
    border-radius: 20px
    margin-top: 20px

.countdown-ico
    width: 36px
    height: 34px
    background: url(../img/time.png)
    margin: 0px 10px
    margin-top: 10px
    text-align: center
    line-height: 40px
    color: #fff

.free-course-img
    float: left
    width: 110px
    height: 110px
    border-radius: 10px
    overflow: hidden
    img
        width: 100%
        height: auto

.everyday-order
    float: left
    width: rightSide
    margin-top: 18px
    margin-left:- rightSide
    
    .everyday
        width: rightSide
        height: 218px
        border-radius: borderRadius
        overflow: hidden
        margin-bottom: 20px
        width: 100%
        box-shadow: boxShadow
        background: url(../img/tip.png)
        .my-course-title
            padding: 10px 0px
        .this-time
            font-size: 12px
            color: #fff
            margin-left: 20px
        h4
            font-size: 16px
            border-left: 5px solid #fff
            color: #fff
            padding-left: 10px
    .my-order
        width: rightSide
        background: #fff
        border-radius: borderRadius
        overflow: hidden
        margin-bottom: 10px
        width: 100%
        padding-bottom: 30px
        box-shadow: boxShadow
        .my-course-title
            padding: 10px 0px
        h4
            font-size: 16px
            padding-left: 10px
    .my-order-icon
        width: 163px
        margin: 0 auto
        margin-top: 10px
    .try-rank
        width: 110px
        height: 40px
        text-align: center
        margin: 0 auto
        margin-top: 60px
        .try-day
            font-size: 16px
            color: #333
            span
                color: #1966ff
        .try-tips
            font-size: 12px
            color: #9b9fa7
            margin-top: 3px

.goods-thumb
    width: 50px
    height: 50px
    overflow: hidden
    border-radius: 5px
    border: 1px solid #e6e6e6
    float: left
    margin-top: 20px
    img
        width: 100%
        height: auto

.countdown-start,.countdown-ico,.countdown-end
    float: left

.onpay-order
    float: left
    width: 50%
    p
        width: 100%
        font-size: 14px
        color: #333
        text-align: center
        margin-top: 10px

.my-course-item
    width: 100%
    overflow: hidden
    margin-top: 30px
    &:nth-child(1)
        margin-top: 0px

.my-course
    width: 100%
    &:hover
        background: #fcfbfd

.more-course
    width: 100%
    text-align: center
    margin-top: 20px
    a
        color: #333
        font-size: 16px

.goin
    a
        background: #e6e6e6
        color: #333333
        margin-top: 30px

.free-course-rank
    font-size: 16px
    color: #9598a2
    margin-top: 13px
    span
        color: #333

.start-try-btn
    a
        display: block
        width: 100px
        height: 30px
        margin: 0 auto
        margin-top: 5px

.slogan
    text-align: center
    width: 100%
    float: left
    margin-top: 15px
    color: #9598a2
    font-size: 14px
    a
        color: #1966ff

.countdown-main
    float: right
    margin-right: 20px
    color: #9598a2
    font-size: 16px

.teacher-thumb-box
    margin-top: 20px

.teacher-thumb-item
    float: left
    text-align: center
    margin-right: 20px
    .teacher-thumb
        width: 40px
        height: 40px
        overflow: hidden
        border-radius: 50%
        img
            width: 100%
            height: auto
    .teacher-name
        color: #98a0a8
        font-size: 12px
        margin-top: 2px

.try-charts-item
    float: left
    text-align: center
    margin-left: 50px
    span
        font-size: 12px
        color: #9598a2
        padding: 3px 10px
        background: #f7f7f7
        border-radius: 7px
        margin-top: 30px
        display: block
    .try-charts-num
        color: #1865ff
        font-size: 30px
        em
            font-size: 16px

.free-course-desc
    float: left
    width: bfb(263,648)
    margin-left: bfb(22,648)

.my-course-box
    width: bfb(648,715)
    margin: 0 auto
    overflow: hidden
    padding: 10px 0px 30px 0px

.free-course-teacher
    margin-top: 8px
    color: #9598a2
    font-size: 16px

.course
    box-shadow: boxShadow
    margin-top: 18px
    background: #fff
    border-radius:borderRadius
    margin-right:rightMargin

.countdown
    width: 100%
    height: 60px
    line-height: 60px
    box-shadow: boxShadow
    border-radius:borderRadius

.my-course-progress
    width: 100%
    float: left
    margin-top: 20px

.progress-box
    margin-right:128px;
    height: 10px
    background: #f7f7f7
    border-radius: 10px
    overflow: hidden

.my-bank-desc
    float: left
    .goon-try
        display: block
        margin-top: 20px
        width: 120px
        height: 35px
        text-align: center
        line-height: 35px
        background: #1966ff
        color: #fff
        border-radius: 20px
    .try-bread
        margin-top: 20px
        font-size: 16px
        color: #696969
    .my-bank-try
        .try-time
            font-size: 12px
            color: #9598a2
        i
            margin-top: 3px
            margin-right: 10px
            float: left
            display: block
            width: 20px
            height: 18px
            background: url(../img/write.png)
        .ontry
            font-size: 18px
            color: #171920
            margin-right: 7px
    .try-title
        margin-top: 20px
        font-size: 16px
        color: #333

.free-course-item
    width: 100%
    overflow: hidden
    margin-top: 30px
    &:nth-child(1)
        margin-top: 0px

.progress-content
    width: 40%
    height: 10px
    background: #1966ff
    border-radius: 10px

.free-course-title
    width: 100%
    font-size: 18px
    color: #333
    height: 40px
    line-height:40px
    ellipsis()

.my-course-title
    width: 93%
    margin: 0 auto
    padding: 20px 0
    h4
        margin: 0
        padding: 0
        height: 20px
        line-height: 20px
        border-left: 5px solid #1865ff
        padding-left: 20px
        font-size: 18px
        color: #171920

.onpay-order-icon
    width: 42px
    height: 42px
    border-radius: 50%
    border: 1px solid #e2e2e2
    position: relative
    margin: 0 auto
    span
        width: 15px
        height: 15px
        background: #1966ff
        border-radius: 50%
        line-height: 15px
        text-align: center
        position: absolute
        right: -3px
        top: -3px
        font-size: 10px
        color: #fff

.goonbtn
    float: left
    width: 120px
    margin-left:-120px
    height: 33px
    background: #1966ff
    color: #fff
    line-height: 33px
    text-align: center
    border-radius: 20px
.goonbtn a
    float: right
    width: 120px
    height: 33px
    background: #1966ff
    color: #fff
    line-height: 33px
    text-align: center
    border-radius: 20px
.onchoose
    float: left
    color: #1865ff
    font-size: 20px
    margin-right: 8px
    border: none
    margin-top: 20px

.goods-desc
    width: 105px
    float: right
    margin-top: 20px
    .goods-price
        color: #f53530
        font-size: 14px
    .goods-title
        color: #9598a2
        font-size: 14px

.my-course-desc
    margin-right:128px
    
    
    .my-course-tips
        margin-top: 20px
        color: #9b9fa7
        font-size: 12px
        span
            background: #f7f7f7
            padding: 3px 6px
            border-radius: 5px
            margin-right: 10px
    .course-classify
        font-size: 16px
        color: #1966ff
    .my-course-num
        font-size: 16px
        color: #9598a2
        border-left: 1px solid #9598a2
        padding-left: 10px
        margin-left: 6px
        line-height: 12px
        display: inline-block
    .my-course-classify
        margin-top: 20px
    h5
        font-size: 18px
        color: #171920
        font-weight: 500
        ellipsis()

.progress-word-box
    float: left
    margin-left:-92px
    .progress-count
        font-size: 16px
        color: #1865ff
        font-weight: 600
        em
            font-size: 12px
            color: #1865ff
    .progress-word
        font-size: 14px
        color: #9598a2

.choose-item
    float: left
    margin-left: 20px
.coursewrap
    width:100%
    float:left
    clear:both
.mycoursedescwrap
    width:100%
    float: left
    clear:both
.progressboxwrap
    width:100%
    float: left
    clear:both
    margin-top:7px
.center-ad img
    width:100%
@media only screen and (min-width: 1448px)
    .try-charts-item
        margin-left:50px
@media only screen and (max-width: 1448px)
    .try-charts-item
        margin-left:28px